<template>
    <el-container>
        <el-aside :width="!isCollapse?'200px' : '64px'">
            <el-menu class="el-menu-vertical-demo"
                :collapse="isCollapse"
                background-color="#545c64" 
                text-color="#fff"
                :default-active="$route.path"
                router
                active-text-color="#ffd04b"
            >
                <div class="top">
                    <img class="logo" src="../assets/images/logo.jpg" alt="">
                </div>
                <el-menu-item index="/home/post">
                    <i class="el-icon-document-copy"></i>
                    <span slot="title">表格展示</span>
                </el-menu-item>
                <el-menu-item index="/home/echarts">
                    <i class="el-icon-menu"></i>
                    <span slot="title">echarts图表</span>
                </el-menu-item>
                <el-menu-item index="/home/Map">
                    <i class="el-icon-location"></i>
                    <span slot="title">地图</span>
                </el-menu-item>
                <el-menu-item index="/home/Tree">
                    <i class="el-icon-s-promotion"></i>
                    <span slot="title">树形控件</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <div class="top_l">
                    <div class="top_l_expansion">
                        <!-- 控制nav展开和关闭 -->
                        <div class="isCollapse" @click="isCollapse = !isCollapse"><i :class="icon"></i></div>
                    </div>
                    <span>
                        <!-- 展示所在位置的路径 -->
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item><span class="text">{{url}}</span></el-breadcrumb-item>
                        </el-breadcrumb>
                    </span>
                </div>
                <div class="headPortrait">
                    <!-- 头像 -->
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            <img src="../assets/images/headPortrait.jpg" alt="">
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <!-- <el-dropdown-item>个人信息</el-dropdown-item> -->
                            <el-dropdown-item @click.native="exit">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import Cookies from 'js-cookie'
    export default {
        name: 'Home',
        data() {
            return {
                isCollapse: false,
                icon: 'el-icon-d-arrow-left',
                url: undefined,
                hh: false
            };
        },
        methods: {
            exit(){
                this.$confirm('此操作将退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    Cookies.remove('name'),
                    Cookies.remove('password')
                    this.$router.push("/login")
                    this.$message({
                        type: 'success',
                        message: '退出成功!',

                    });
                }).catch(() => {});
            }
        },
        watch: {
            isCollapse(val) {
                if(val){
                    this.icon = 'el-icon-d-arrow-right'
                }else {
                    this.icon = 'el-icon-d-arrow-left'
                }
            },
            $route(route) {
                this.url = route.meta ? route.meta.name : ''
            }
        },
        mounted(){
            this.url = this.$route.meta ? this.$route.meta.name : ''
        }
    }
</script>

<style scoped>
    .top {
        display: flex;
        height: 60px;
        align-items: center;
        justify-content: center;
    }
    .el-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: white;
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
    .top_l {
        display: flex;
    }
    .logo {
        width: 40px;
        height: 40px;
        border-radius: 6px;
    }
    .top_l_expansion {
        margin-right: 20px;
    }
    .top_l span {
        display: flex;
        align-items: center;
    }
    .headPortrait {
        width: 35px;
        height: 35px;
        border-radius: 4px;
        cursor: pointer;
        overflow: hidden;
    }
    .headPortrait img {
        width: 100%;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .isCollapse {
        cursor: pointer;
    }
    .text {
        color: #97a8be;
    }
    .el-menu {
        height: 100%;
    }

    ::v-deep .el-container, .el-aside {
        min-height: 100vh;
    }
    ::v-deep .el-aside {
        transition: width .2s ease;
    }
</style>